snippet panel
<div class="panel panel-default">
  <div class="panel-heading">
    $1
  </div>

  <div class="panel-body">

  </div>

</div>
endsnippet

# Material design lite
snippet layout
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <div class="mdl-layout-spacer"></div>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content">
      $1
    </div>
  </main>
</div>
endsnippet

snippet nav "Material design nav bar"
<nav class="mdl-navigation">
  <a class="mdl-navigation__link" href="#">
    $1
  </a>
</nav>
endsnippet


snippet list "Material design list"
<ul class="mdl-list">
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      $1
    </span>
  </li>
</ul>
endsnippet

snippet btn "Material design basic button"
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  $1
</button>
endsnippet

snippet tabs "Material design tabs"
<div class="mdl-tabs mdl-js-tabs">
  <div class="mdl-tabs__tab-bar">
    <a href="#tab1" class="mdl-tabs__tab">Tab One</a>
    <a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
    <a href="#tab3" class="mdl-tabs__tab">Tab Three</a>
  </div>
  <div class="mdl-tabs__panel is-active" id="tab1">
    <p>First tab's content.</p>
  </div>
  <div class="mdl-tabs__panel" id="tab2">
    <p>Second tab's content.</p>
  </div>
  <div class="mdl-tabs__panel" id="tab3">
    <p>Third tab's content.</p>
  </div>
</div>
endsnippet

snippet card "Material design card"
<div class="demo-card-square mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title mdl-card--expand">
    <h2 class="mdl-card__title-text">Update</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Aenan convallis.
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      View Updates
    </a>
  </div>
</div>
endsnippet

snippet cell "Material design cell"
<div class="mdl-cell mdl-cell--$1-col">

</div>
endsnippet

snippet mdl-cell "Material design cell classname"
mdl-cell mdl-cell--$1-col
endsnippet

snippet tooltip "Material design tooltip"
<div class="mdl-tooltip mdl-tooltip--large" for="$1">
  $2
</div>
endsnippet

snippet icon "Material icon"
<i class="material-icons">
  $1
</i>
endsnippet

snippet color "Material color classname"
mdl-color--$1
endsnippet

snippet colort "Material color classname"
mdl-color-text--$1
endsnippet

snippet spinner "Material design spinner"
<div class="mdl-spinner mdl-js-spinner is-active"></div>
endsnippet
